<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 500px;
				height: 500px;
				background-color: #bfa;
				position: relative;
				
					
			}
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				position: absolute;
				
				/*
				 水平布局
				   left+margin-left + border-left +padding-left + width +padding-right +border-right +margin-right +right=包含块高度
				   当我们开启了绝对定位后：
				      水平方向的布局等式就需要添加left和right两个值
				        此时规则和之前一样，只是多添加了两个值
				          当发生过渡约束：
				                  如果九个值中没有auto 则自动调整right值以使等式满足
				                  
				        -可以设置auto的值
				          margin width left  right
				          
				        -因为left和他right的值默认是auto，所以吐过不知道left和right
				         则等式不满足时，会自动调整这两个值
				         
				       垂直方向布局的等式也必须要满足
				       top + margin-top/bottom + padding-top/bottom +border-top/bottom +bottom
				          
				   * 
				   * */
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="box2"></div>
		</div>
	</body>
</html>
